<template>
    <div>
        <div class="header">
                <div class="logo">
                    <img src="../../static/images/64hehcit5i31v6327uid0m431spce1pt.png">
                </div>
                    <input type="text" placeholder="套装" @click="isshow()" v-model="goodword">
                <div class="ask">
                    <img src="../../static/images/w4y1wcojdwfwxtr5cwh44d5cvkldrogb.png" v-if="!isShow">
                    <span v-if="goodword.length==0 && isShow" class="cancel" @click="cancel">取消</span>
                    <router-link tag="span"
                    :to="{path:'Preference',query:{uq:goodword,cKey:'wap-search'}}"
                    v-if="goodword.length>0" class="enter">
                    搜索
                    </router-link>
                </div>
            </div>
        <div class="hotsear" v-if="isShow"> 
            <div>
                <img src="../../static/images/8im4k3yb42zzkk20oc7c8o7jt2ugtptx.png" />
                <span>热门搜索</span>
            </div>
            <div>
                <ul>
                    <router-link tag="li" v-for="(val,index) in hotgoods" 
                    :to="{path:'Preference',query:{uq:val.words,cKey:'wap-search'}}"
                    :key="index" @click="goodname(val.words)">
                    {{val.words}}
                    </router-link>
                 </ul> 
            </div>
        </div>
    </div> 
</template>
<script>
    export default{
        data(){
            return {
                isShow:false,
                goodword:""
            }
        },
        methods:{
            isshow(){
                this.isShow=true;
                this.$emit('homeShow',false);
            },
            cancel(){
                this.isShow=false;
                this.$emit('homeShow',true);
            },
            goodname(res){
                this.goodword=res;
            }
            
        },
        props:["hotgoods"]
    }
</script>
<style scoped>
    .header{
        height: 1.92rem;
        display: flex;
        align-items: center;
        background: #fff;
        font-size: .3rem;
    }
    .logo{
        height: 1.92rem;
        width: 15%;
        padding: 0 0.6rem;
        display: flex;
        align-items: center;
    }
    img{
        width: 100%;
    }
    input{
        border-radius: 0.2rem;
        width: 72%;
        outline: none;
        background:rgb(244, 244, 244) url(../../static/images/9n9zsco2te1o85m0sh7ac63u6cecollh.png) no-repeat 0.4rem center;
        background-size: 0.5rem;
        height: 1.2rem; 
        border: none;
        padding: 0 1.2rem;
    }
    .ask{
        height: 1.92rem;
        width: 13%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header .ask .cancel{
        color: #666;
        font-size: 0.5rem;
    }
    .header .ask .enter{
        color: #f36;
        font-size: 0.5rem;
    }
    .header .ask img{
        width: 0.73rem;
    }
       .hotsear{
        width: 100%;
        height: 100vh;
        background: #fff;
        font-size: .6rem;
        position: fixed;
        z-index: 2000;
    }
    .hotsear p{
        color: #666;
        text-indent: 1rem;       
    }
    .hotsear div {
        padding: 0 .5rem;
        display: flex;
        color: #666;
    }
    .hotsear div:first-child{
        margin: 1rem 0 0 0;
    }
    .hotsear div:last-child{
        display: flex;
        flex-flow: wrap row;
        padding : .4rem 1rem ;
    }
    .hotsear img{
        width: .5rem;
        height: .6rem;
        margin: 0 .3rem 0 0;
    }
    .hotsear div li{
        background: #eee;
        color: #f35;
        font-size: .4rem;
        display: inline-block;
        margin: .3rem .2rem; 
        padding: 0 .4rem;
        border-radius: .5rem;
        height: 0.85rem;
        line-height: 0.85rem;
    }
    .hotsear div li:nth-child(2),
    .hotsear div li:nth-child(4),
    .hotsear div li:nth-child(7){
        color: #666;
    }
</style>